<template>
	<div class="mysubs">
		<head-top head-title="我的订阅" go-back="true"></head-top>
		<div class="navTab">
			<div :class="selected?'navItem active':'navItem'" @click="selected=true">
				<span>IP</span>
			</div>
			<div :class="!selected?'navItem active':'navItem'" @click="selected=false">
				<span>专题</span>
			</div>
		</div>
        
		<div class="myip" v-if="selected" v-load-more="loaderMore_ip">
			<div class="myip-li" v-for="item in res_data_ip" :key="item.id">
				<router-link tag="div" :to="`/aip/${item.ip_id}`" class="user">
					<div class="avatar">
						<img :src="imgBaseUrl+item.pic" v-if="item.head_img != ''">
						<svg class="icon-svg" v-else>
							<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#avatar-default"></use>
						</svg>
					</div>
				</router-link>
				<div class="info">
					<router-link tag="p" :to="`/aip/${item.ip_id}`" class="title">{{ item.title }}</router-link>
					<p class="date"><span>最近更新：{{ item.last_modify_time }}</span><span class="del" @click="unFollow(item,'res_data_ip',item.ip_id)">取消订阅</span></p>
				</div>
			</div>

			<p v-if="showLoading_ip" class="page-infinite-loading">
				<mt-spinner type="snake"></mt-spinner>加载中...
			</p>
			<p v-if="touchend_ip" class="no-more">
				没有更多了
			</p>
		</div>
		<div class="myspec" v-else v-load-more="loaderMore_sb">
			<div class="myspec-li" v-for="item in res_data_sb" :key="item.id">
				<router-link tag="div" :to="`/aspec/${item.subject_id}`" class="user">
					<div class="avatar">
						<img :src="imgBaseUrl+item.pic">
					</div>
				</router-link>
				<div class="info">
					<router-link tag="p" :to="`/aspec/${item.subject_id}`" class="title">{{ item.title }}</router-link>
					<p class="date">最近更新：{{ item.last_modify_time }}</p>
					<p class="btn">
						<span class="del" @click="unFollow(item,'res_data_sb',item.subject_id)">取消订阅</span>
					</p>
				</div>
			</div>
			<p v-if="showLoading_sb" class="page-infinite-loading">
				<mt-spinner type="snake"></mt-spinner>加载中...
			</p>
			<p v-if="touchend_sb" class="no-more">
				没有更多了
			</p>
		</div>
	</div>
</template>

<script>
	import {Toast} from 'mint-ui'
	import headTop from '@/components/header/head'
	import {subscriptionGetlist,subscriptionDel, imgBaseUrl} from '@/api'
    import {loadMore} from '@/components/common/mixin'
	import {mapMutations, mapState} from 'vuex'
	export default {
		data () {
			return {
				imgBaseUrl,
				selected: true,
				res_data_ip: [],
				res_data_sb: [],
				page_ip: 1,
				page_sb: 1,
				preventRepeatReuqest_ip: false, //到达底部加载数据，防止重复加载
				preventRepeatReuqest_sb: false, //到达底部加载数据，防止重复加载
				showLoading_ip: false,
				showLoading_sb: false,
				touchend_ip: false, //没有更多数据
				touchend_sb: false, //没有更多数据
			}
		}, 
		mounted() {
			this.getResData_ip();
			this.getResData_sb();
		},
        mixins: [loadMore],
		components: {
			headTop,
		},
		computed:{
            ...mapState([
                'userInfo'
            ]),
		},
        methods: {
            ...mapMutations([
				'DIALOG_LOGIN',
			]),
			unFollow(item,res_data,obj_id){
				if(this.userInfo && this.userInfo.user_id){
					let para = {
						user_id: this.userInfo.user_id,
						obj_id: obj_id,
					}
					subscriptionDel(para).then(res => {
						if(res.data){
							var index = this[res_data].indexOf(item)
							if (index !== -1) {
								this[res_data].splice(index, 1);
							}
						}else{
							if(res.tologin){
								this.DIALOG_LOGIN();
								this.$router.push('/login');
							}else {
								Toast(res.msg);
							}
						}
					});
				}else{
					if(res.tologin){
						this.DIALOG_LOGIN();
						this.$router.push('/login');
					}else {
						Toast(res.msg);
					}
				}
			},

			async getResData_ip(){
				//获取数据
				this.showLoading_ip = true;
				let para = {
					user_id: this.userInfo.user_id,
					type: 1,
					page: this.page_ip,
				};
				let res = await subscriptionGetlist(para);
				let res_data_ip = res.data
				for(let i =0;i<res_data_ip.length; i++){
					res_data_ip[i].good = 0;
					res_data_ip[i].goodcan = true;
				}
				this.hideLoading();
				this.res_data_ip = [...res_data_ip];
				//当获取数据小于10，说明没有更多数据，不需要再次请求数据
				if (res_data_ip.length < 10) {
					this.touchend_ip = true;
					return
				}
				this.preventRepeatReuqest_ip = false;
				//开始监听scrollTop的值，达到一定程度后显示返回顶部按钮
				// showBack(status => {
				// 	this.showBackStatus = status;
				// });
			},
			//到达底部加载更多数据
			async loaderMore_ip(){
				if (this.touchend_ip) {
					return
				}
				//防止重复请求
				if (this.preventRepeatReuqest_ip) {
					return 
				}
				this.showLoading_ip = true;
				this.preventRepeatReuqest_ip = true;
				//数据的定位加10位
				this.page_ip++;
				let para = {
					user_id: this.userInfo.user_id,
					type: 1,
					page: this.page_ip,
				};
				let res = await subscriptionGetlist(para);
				if(res.tologin){
					this.DIALOG_LOGIN();
					this.$router.push('/login');
				}
				let res_data_ip = res.data
				for(let i =0;i<res_data_ip.length; i++){
					res_data_ip[i].good = 0;
					res_data_ip[i].goodcan = true;
				}
				this.hideLoading();
				this.res_data_ip = [...this.res_data_ip, ...res_data_ip];

				//当获取数据小于10，说明没有更多数据，不需要再次请求数据
				if (res_data_ip.length < 10) {
					this.touchend_ip = true;
					return
				}
				this.preventRepeatReuqest_ip = false;
			},
			async getResData_sb(){
				//获取数据
				this.showLoading_sb = true;
				let para = {
					user_id: this.userInfo.user_id,
					type: 2,
					page: this.page_sb,
				};
				let res = await subscriptionGetlist(para);
				let res_data_sb = res.data
				for(let i =0;i<res_data_sb.length; i++){
					res_data_sb[i].good = 0;
					res_data_sb[i].goodcan = true;
				}
				this.hideLoading();
				this.res_data_sb = [...res_data_sb];
				//当获取数据小于10，说明没有更多数据，不需要再次请求数据
				if (res_data_sb.length < 10) {
					this.touchend_sb = true;
					return
				}
				this.preventRepeatReuqest_sb = false;
				//开始监听scrollTop的值，达到一定程度后显示返回顶部按钮
				// showBack(status => {
				// 	this.showBackStatus = status;
				// });
			},
			//到达底部加载更多数据
			async loaderMore_sb(){
				if (this.touchend_sb) {
					return
				}
				//防止重复请求
				if (this.preventRepeatReuqest_sb) {
					return 
				}
				this.showLoading_sb = true;
				this.preventRepeatReuqest_sb = true;
				//数据的定位加10位
				this.page_sb++;
				let para = {
					user_id: this.userInfo.user_id,
					type: 2,
					page: this.page_sb,
				};
				let res = await subscriptionGetlist(para);
				if(res.tologin){
					this.DIALOG_LOGIN();
					this.$router.push('/login');
				}
				let res_data_sb = res.data
				for(let i =0;i<res_data_sb.length; i++){
					res_data_sb[i].good = 0;
					res_data_sb[i].goodcan = true;
				}
				this.hideLoading();
				this.res_data_sb = [...this.res_data_sb, ...res_data_sb];

				//当获取数据小于10，说明没有更多数据，不需要再次请求数据
				if (res_data_sb.length < 10) {
					this.touchend_sb = true;
					return
				}
				this.preventRepeatReuqest_sb = false;
			},
			//开发环境与编译环境loading隐藏方式不同
			hideLoading(){
				this.showLoading_ip = false;
				this.showLoading_sb = false;
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
	.mysubs {
		padding-top: 3.85rem;
	}
	.navTab {
		position: fixed;
		top:1.95rem;
		left: 0;
		width: 100%;
		display: flex;
		.active {
			color:#f86254;
			span {
				padding: 0 0.5rem;
				border-bottom: 0.1rem solid #f86254;
			}
		}
		.navItem {
			width: 50%;
			height: 1.5rem;
			line-height: 1.5rem;
			text-align: center;
			font-size: 0.6rem;
			background:#ffffff;
		}
	}
	.myip{
		.myip-li {
			display: flex;
			font-size: 0.5rem;
			line-height: 1rem;
			padding: 0.5rem 1rem;
			border-bottom: 1px solid #eee;
			background: #fff;
		}
		.user {
			.avatar {
				width: 2rem;
				height: 2rem;
				border-radius: 50%;
				overflow: hidden;
				margin-right:0.5rem;
			}
		}
		.info {
			width: 100%;
			.title {
				// font-weight: bold;
			}
			.date {
				color:#ccc;
				display: flex;
				justify-content: space-between;
				.del {
					color:#d8584a;
				}
			}
		}
		
	}
	.myspec{
		.myspec-li {
			display: flex;
			font-size: 0.5rem;
			line-height: 1rem;
			padding: 0.5rem 1rem;
			border-bottom: 1px solid #eee;
			background: #fff;
		}
		.user {
			position: relative;
			width: 5.3rem;
			height: 0;
			padding-bottom: 3rem;
			overflow: hidden;
			margin-right:0.5rem;
		}
		.date {
			color:#ccc;
		}
		.btn {
			span {
				color: #d8584a;
			}
		}
	}
</style>
